<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul class="cart-list" v-for="item in cartList" :key="item.id">
                    <li class="cart-list-con1">
                        <input type="checkbox" name="chk_list" 
                        @change = "changeChecked(item.skuId,item.isChecked)"
                        :checked="item.isChecked === 1">
                    </li>
                    <li class="cart-list-con2">
                        <img :src="item.imgUrl">
                        <div class="item-msg">{{item.skuName}}</div>
                    </li>
                    
                    <li class="cart-list-con4">
                        <span class="price">{{item.cartPrice}}</span>
                    </li>
                    <li class="cart-list-con5">
                        <a href="javascript:void(0)" class="mins" @click="changeSkuNum(item,-1)">-</a>
                        <input autocomplete="off" type="text" :value="item.skuNum" 
                        @change="updateSkuNum(item,$event)" @input="controlSkuNum"
                        minnum="1" class="itxt" >
                        <a href="javascript:void(0)" class="plus" @click="changeSkuNum(item,1)">+</a>
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">{{item.skuNum*item.cartPrice}}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a href="javascript:;" class="sindelet" @click="deleteChecked(item)">删除</a>
                        <br>
                        <a href="javascript:;">移到收藏</a>
                    </li>
                </ul>

            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input class="chooseAll" type="checkbox" v-model="cart_checkAll">
                <span> 全选 </span>
            </div>
            <div class="option">
                <a href="javascript:;" @click="deleteAllChecked" >删除选中的商品</a>
                <a href="javascript:;">移到我的关注</a>
                <a href="javascript:;">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>{{cart_checkedNum}}</span>件商品</div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{cart_totalPrice}}</i>
                </div>
                <div class="sumbtn">
                    <router-link to="/trade">结算</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState,mapActions,mapGetters} from 'vuex'
    export default {
        name: 'ShopCart',
        computed:{
            ...mapState({cartList:state=>state.cart.cartList}),
            ...mapGetters(['cart_totalPrice','cart_checkedNum']),
            cart_checkAll:{
                get(){
                    return this.$store.getters.cart_checkAll
                },
                async set(val){
                    //发送请求进行全选
                    // val是点击后的状态
                    val = val?1:0
                    const result = await this.checkAllState(val)
                    // console.log(result)
                    if(result.every(item=>item===200)){
                        //同步仓库
                        await this.getCartList()
                    }else{
                    this.$alert('切换状态失败')
                    }
                }
            }
        },
        methods: {
            ...mapActions(['getCartList','checkState','checkAllState','deleteCart','deleteAllCheckedCart','addToCart']),
            //改变商品选中状态
            async changeChecked(skuID,isChecked){
                //isChecked是点击之前的状态,需要取反,放进请求参数
                isChecked = isChecked === 1 ? 0 : 1
                const code = await this.checkState({skuID,isChecked})
                if(code === 200){
                    //同步仓库
                    await this.getCartList()
                }else{
                    this.$alert('切换状态失败')
                }
            },
            //删除单个商品
            async deleteChecked(cartGoods){
                try {
                    await this.$confirm('确定删除'+cartGoods.skuName+'吗?')
                    const code = await this.deleteCart(cartGoods.skuId)
                    if(code === 200){
                        //同步仓库
                        await this.getCartList()
                    }else{
                        this.$alert('删除失败')
                    }
                } catch (error) {
                    if(error == 'cancel'){
                        console.log(error)
                    }else{
                        this.$alert('网络问题!!!')
                    }
                }
            },
            //删除全部选中的
            async deleteAllChecked(){
                try {
                    await this.$confirm('确定要删除选中的商品吗')
                    const result = await this.deleteAllCheckedCart()
                    if(result.every(item=>item ===200)){
                        // 同步仓库
                        await this.getCartList()
                    }else{
                        this.$alert('删除失败')
                    }
                } catch (error) {
                    if(error == 'cancel'){
                        console.log(error)
                    }else{
                        this.$alert('网络问题!!!')
                    }
                }
                
            },
            // 改变商品数量
            async changeSkuNum(cartGoods,skuNum){
                let lastSkuNum = cartGoods.skuNum
                let finalSkuNum = lastSkuNum + skuNum
                if(finalSkuNum >= 0){
                    //点击时发送添加购物车请求,增加或减少商品数量
                    //skuNum是差量,不是商品总数
                    const code = await this.addToCart({skuId:cartGoods.skuId,skuNum})
                    if(code === 200){
                        //同步仓库
                        await this.getCartList()
                    }else{
                        this.$alert('失败')
                    }
                }
            },
            //修改商品数量(通过输入框)
            updateSkuNum(cartGoods,e){
                let targetVal = e.target.value
                let skuNum = +targetVal - cartGoods.skuNum
                //更新数据库
                this.changeSkuNum(cartGoods,skuNum)
            },
            //对修改商品数量输入的数据 约束
            controlSkuNum(e){
                let targetVal = e.target.value
                let reg = /\D+/g
                //更新界面上的数据
                e.target.value = targetVal.replace(reg,'')
            }
        },
        async created(){
            //分发请求购物车列表的action
            await this.getCartList()
        }
        
    }
</script>

<style lang="less" scoped>
    .cart {
        width: 1200px;
        margin: 0 auto;

        h4 {
            margin: 9px 0;
            font-size: 14px;
            line-height: 21px;
        }

        .cart-main {
            .cart-th {
                background: #f5f5f5;
                border: 1px solid #ddd;
                padding: 10px;
                overflow: hidden;

                &>div {
                    float: left;
                }

                .cart-th1 {
                    width: 5%;

                    input {
                        vertical-align: middle;
                    }

                    span {
                        vertical-align: middle;
                    }
                }

                .cart-th2 {
                    width: 30%;
                }
                .cart-th3,
                .cart-th4,
                .cart-th5,
                .cart-th6 {
                    width: 15%;

                }
            }

            .cart-body {
                margin: 15px 0;
                border: 1px solid #ddd;

                .cart-list {
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    overflow: hidden;

                    &>li {
                        float: left;
                    }

                    .cart-list-con1 {
                        width: 5%;
                    }

                    .cart-list-con2 {
                        width: 30%;

                        img {
                            width: 82px;
                            height: 82px;
                            float: left;
                        }

                        .item-msg {
                            float: left;
                            width: 150px;
                            margin: 0 10px;
                            line-height: 18px;
                        }
                    }

                   

                    .cart-list-con4 {
                        width: 15%;

                    }

                    .cart-list-con5 {
                        width: 15%;

                        .mins {
                            border: 1px solid #ddd;
                            border-right: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }

                        input {
                            border: 1px solid #ddd;
                            width: 40px;
                            height: 33px;
                            float: left;
                            text-align: center;
                            font-size: 14px;
                        }

                        .plus {
                            border: 1px solid #ddd;
                            border-left: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }
                    }

                    .cart-list-con6 {
                        width: 15%;

                        .sum {
                            font-size: 16px;
                        }
                    }

                    .cart-list-con7 {
                        width: 15%;

                        a {
                            color: #666;
                        }
                    }
                }
            }
        }

        .cart-tool {
            overflow: hidden;
            border: 1px solid #ddd;

            .select-all {
                padding: 10px;
                overflow: hidden;
                float: left;

                span {
                    vertical-align: middle;
                }

                input {
                    vertical-align: middle;
                }
            }

            .option {
                padding: 10px;
                overflow: hidden;
                float: left;

                a {
                    float: left;
                    padding: 0 10px;
                    color: #666;
                }
            }

            .money-box {
                float: right;

                .chosed {
                    line-height: 26px;
                    float: left;
                    padding: 0 10px;
                }

                .sumprice {
                    width: 200px;
                    line-height: 22px;
                    float: left;
                    padding: 0 10px;

                    .summoney {
                        color: #c81623;
                        font-size: 16px;
                    }
                }

                .sumbtn {
                    float: right;
                    a {
                        display: block;
                        position: relative;
                        width: 96px;
                        height: 52px;
                        line-height: 52px;
                        color: #fff;
                        text-align: center;
                        font-size: 18px;
                        font-family: "Microsoft YaHei";
                        background: #e1251b;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>